<template>
  <div>
    <van-button
      v-if="!followed"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      :loading="loading"
      size="small"
      icon="plus"
      @click="follow"
      >关注</van-button
    >
    <van-button
      v-else
      class="follow-btn"
      round
      :loading="loading"
      size="small"
      @click="follow"
      >已关注</van-button
    >
  </div>
</template>

<script>
import { getFollow, deleteFollow } from "@/api/login";
export default {
  props: ["followed", "aut_id"],
  data() {
    return {
      loading: false,
    };
  },
  // 组件v-model的双向数据绑定
  model: {
    prop: "followed",
    event: "changeFollow",
  },

  methods: {
    async follow() {
      this.loading = true;
      try {
        if (this.followed) {
          // 取消关注
          await deleteFollow(this.aut_id);
          this.$toast("取消关注成功");
        } else {
          // 关注
          await getFollow(this.aut_id);
          this.$toast("关注成功");
        }

        // 尽量使用父子组件的传值 ,话可以传值出去
        this.$emit("changeFollow", !this.followed);
        // this.articleContent.is_followed = !this.articleContent.is_followed; //位置
      } catch (error) {
        console.log(error);
        if (error.response && error.response.status === 401) {
          this.$toast("请先登录");
        }
      }
      this.loading = false;
    },
  },
};
</script>

<style>
</style>